<template>
    <div class="loginPage">
        <div class="title">一日之计</div>
        <div class="loginForm">
            <a-form class="form" 
                ref="formRef"
                :rules="rules"
                :model="formState" 
                :label-col="labelCol" 
                :wrapper-col="wrapperCol"
            >
                <a-form-item label="用户名" name="userName">
                    <a-input placeholder="请输入用户名" v-model:value="formState.userName" />
                </a-form-item>
                <a-form-item label="密码"  name="password">
                    <a-input type="password" placeholder="请输入密码" v-model:value="formState.password" />
                </a-form-item>
            </a-form>
            
            <div class="help">
                <span @click="goToFindPassword">忘记密码</span>
                <span @click="goToRegister">注册账号</span>
            </div>
            <div @click="login()" class="loginBtn">
                    登录
            </div>
        </div>
    </div>
</template>


<script setup lang="ts">

import {useRouter} from 'vue-router'
import { reactive, ref } from 'vue';
import {loginApi} from '@/api/handleLogin.js'
import {searchUserInfoApi} from '@/api/handleUserAccount.js'
import {useUserStore} from '@/store/user.js'
const store = useUserStore()

const router = useRouter()

const formRef = ref()
const formState = reactive({
    userName: "",
    password: "",
});
const  labelCol = reactive({ span: 7 }) 
const  wrapperCol= reactive({ span: 17 })

const rules = ref({
    userName:[
        {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
        },
    ],
    password:[
         {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
        },
    ],
})


const goToFindPassword=()=>{
    router.push('/find-password')
}
const goToRegister=()=>{
    router.push('/register-account')

}
const login=()=>{
    formRef.value
    .validate().then(async()=>{
        let res = await loginApi(formState)
        if(res){
            // 登录成功后，删除本地存储标识
            sessionStorage.setItem('localDb','false')
            console.log('数据存储中',res?.token)
            sessionStorage.setItem("token",res?.token)

            let result = await searchUserInfoApi()
            store.updateUserInfo(result)
            let userRes = store.getUserInfo()
            if(userRes?.roles?.length > 0){
                router.replace("/home")
            }else{
                // 进入welcome页
                router.replace('welcome')
            }
        }
    }).catch((err)=>{
        console.log(err)
    })

}


</script>

<style scoped lang="less">

.loginPage{
    background-color:#fae7bc;
    min-height: 100vh;
    box-sizing: border-box;
    padding:15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;

    .title{
        font-size: 30px;
        color:#567764;
        letter-spacing: 10px;
        line-height: 25vh;
    }
    .loginForm{
        position: relative;
        padding: 30px;
        width: 80%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: rgba(214, 197, 116, 0.47);

        .form{
            display: flex;
            flex-direction: column;
            gap:10px;
             input{
                background-color: rgba(255, 255, 255,0.68);
                border: none;
                border-radius: 5px;
                outline: none;
                padding: 2px 5px;
            }
        }
      
        .help{
            color: #88948b;
            font-size: 14px;
            display: flex;
            gap:10px;
        }
        .loginBtn{
            background-color: #708775;
            color: white;
            border-radius: 15px;
            padding: 5px 0 5px 20px;
            margin-top: 10px;
            font-size: 18px;
            letter-spacing: 20px;
            width: 50%;
            max-width: 200px;
        }
    }

}


:deep(:where(.css-dev-only-do-not-override-1p3hq3p).ant-form-item){
     .ant-form-item-label > label{
        color:#747474;
    }
}

@media (max-width: 575px) {
    :deep(:where(.css-dev-only-do-not-override-1p3hq3p).ant-row){
        justify-content: space-between;
    }
    :deep(:where(.css-dev-only-do-not-override-1p3hq3p).ant-form-item){
        margin-bottom: 0px;
    }
    :deep(:where(.css-dev-only-do-not-override-1p3hq3p).ant-form .ant-form-item .ant-form-item-label){
        flex: 1 1 0; 
        max-width: 30%;
        text-align: end;
    }

    :deep(:where(.css-dev-only-do-not-override-1p3hq3p).ant-form .ant-form-item .ant-form-item-control){
        flex: 1 1 0; 
        max-width: 65%; 
    }
}
</style>